<template>
  <view class="page">
    <view class="header">Hi，欢迎回来</view>

    <view class="user-card">
      <view class="card-header">
        <image class="avatar" :src="user.avatar" mode="aspectFill" />
        <view class="info">
          <view class="name">{{ user.name }}</view>
          <view class="time">上次访问：{{ lastVisit }}</view>
        </view>
      </view>
      
      <view class="divider"></view>
      
      <view class="card-content">
        <view class="item" v-for="item in cardInfo">
          <view class="num">{{ item.num }}</view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
      <view class="card-bottom">

      </view>
    </view>

    <view class="list">
      <TnListItem class="list-item" width="95%" @click="goCalendar" right-icon="right" right-icon-color="#fff">
        <tn-icon name="flag" :bold="false"></tn-icon> 
        <text class="text">活动日历</text>
      </TnListItem>
      <TnListItem class="list-item" width="95%" @click="goFootprint" right-icon="right" right-icon-color="#fff">
        <tn-icon name="calendar" :bold="false"></tn-icon> 
        <text class="text">我的足迹</text>
      </TnListItem>
      <TnListItem class="list-item" width="95%" @click="goContact" right-icon="right" right-icon-color="#fff">
        <tn-icon name="share-circle" :bold="false"></tn-icon> 
        <text class="text">联系我们</text>
      </TnListItem>
      <TnListItem class="list-item" width="95%" @click="goTeacherApply" right-icon="right" right-icon-color="#fff">
        <tn-icon name="girl" :bold="false"></tn-icon> 
        <text class="text">老师入驻申请</text>
      </TnListItem>
      <TnListItem v-if="isEnterprise"  class="list-item" width="95%" @click="goTeacherApply" right-icon="right" right-icon-color="#fff">
        <tn-icon name="girl" :bold="false"></tn-icon> 
        <text class="text">企业活动</text>
      </TnListItem>
      <TnListItem v-if="isEnterprise"  class="list-item" width="95%" @click="goTeacherApply" right-icon="right" right-icon-color="#fff">
        <tn-icon name="girl" :bold="false"></tn-icon> 
        <text class="text">活动数据展示</text>
      </TnListItem>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getStorage } from '../../utils/storage';
import TnListItem from '@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue'

// 用户信息
const user = ref({
  avatar: '/static/头像/image.png',
  name: 'janice',
  lastVisitAt:'1755949680000',
  courseKindCount:12,//已经学习的课程种类
  totalTime:3600,//总参与活动时长，单位分钟
  activityCount:25,//参与活动次数
});
// 课程信息

// 活动足迹
const cardInfo = ref([
  {name:'活动分钟',num:12},
  {name:'活动次数',num:12},
  {name:'课程种类',num:12}
])

const lastVisit = computed(() => {
  const d = new Date();
  const y = d.getFullYear(); const m = String(d.getMonth()+1).padStart(2,'0'); const dd = String(d.getDate()).padStart(2,'0');
  return `${y}-${m}-${dd}`;
});

const actMap = getStorage('ACTIVITY_PARTICIPATE') || {};
const courseMap = getStorage('COURSE_PARTICIPATE') || {};

const stats = computed(() => {
  const activityDates = Object.keys(actMap);
  const activityCount = activityDates.reduce((s, k) => s + (actMap[k]?.length || 0), 0);
  const courseKinds = new Set<string>();
  Object.keys(courseMap).forEach(k => {
    (courseMap[k] || []).forEach((c: any) => courseKinds.add(c.title));
  });
  return { activityDates, activityCount, courseKinds: courseKinds.size };
});

const isEnterprise = computed(() => getStorage('USER_ROLE') === 'enterprise');

const goCalendar = () => uni.navigateTo({ url: '/pages/my/calendar' });
const goFootprint = () => uni.navigateTo({ url: '/pages/my/footprint' });
const goContact = () => uni.navigateTo({ url: '/pages/my/contact' });
const goTeacherApply = () => uni.navigateTo({ url: '/pages/teacher/apply' });

</script>

<style lang="scss">
.divider { height: 2rpx; background: #b4b4b4; margin: 28rpx 0; }
.page { 
  padding: 20rpx 36rpx;
  min-height: 100vh;
  background: #314039; 
  .header { font-size: 45rpx; font-weight: 600; color:#fff;}
  // 卡片
  .user-card {
    background: #d7d7d7; 
    border-radius: 16rpx; 
    padding: 20rpx;
    margin: 16rpx 0;

    .card-header{
      display: flex;
      .avatar { width: 120rpx; height: 120rpx; border-radius: 50%; background: #eee; }
      .info {font-weight: 600; margin-left: 16rpx; display: flex; flex-direction: column; gap: 6rpx; justify-content: center; }
      .name { font-size: 45rpx;  }
      .time{ font-size: 25rpx; }
    }
    .card-content{
      display: flex;
      justify-content: space-around;
      .item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .num{
          font-weight: 700;
        }
        .name{
          font-size: 30rpx;
        }
      }
    }
    
  }
  // 列表
  .list {  
    margin: 16rpx 0;overflow: hidden; 
    .list-item{
      color:#fff;
      .text{
        margin-left: 20rpx;
        font-weight: 600;font-size: 35rpx;
      }
    }
  }
  .enterprise {  background: #fff; border-radius: 16rpx; padding: 20rpx; }
  .enterprise .title { font-size: 30rpx; font-weight: 600; margin-bottom: 8rpx; }
}
</style>


